<template>
    <div class="box">
        <div class="null-page" v-show="yes"></div>
        <div class="member-index" v-loading="loading">
            <div class="member-top">
                <div class="info-wrap">
                    <div class="info-top">
                        <div class="avtar">
                            <router-link to="/member/info">
                                <img v-if="member.headimg" :src="$img(member.headimg)" @error="member.headimg = defaultHeadImage" />
                                <img v-else :src="$img(defaultHeadImage)" />
                            </router-link>
                        </div>
                        <div class="member-wrap">
                            <template v-if="member">
                                <div class="name member-name" v-if="member.nickname">
                                    <router-link to="/member/info">{{ member.nickname }}</router-link>
                                    <div v-if="member.member_type == 2">邀请码<el-link @click="copyLink">{{ member.invite_code }}</el-link></div>
                                </div>
                                <div class="level" v-if="member.member_level_name">{{ member.member_level_name }}</div>
                                <div class="growth">
                                    成长值：
                                   <el-progress :text-inside="true" :stroke-width="10" :percentage="progress" :show-text="false"></el-progress>
                                    <div></div>
                                </div>
                            </template>
                            <div class="no-login name" v-else>未登录</div>
                        </div>
                    </div>
                    <div class="account">
                        <div class="content">
                            <div class="item">
                                <router-link to="/member/my_coupon" class="item-content">
                                    <img src="@/assets/images/coupon.png" alt />
                                    <div class="name">优惠券</div>
                                    <div class="num" v-if="member.member_id && couponNum">{{ couponNum }}</div>
                                    <div class="num" v-else>0</div>
                                </router-link>
                            </div>

                            <div class="item">
                                <router-link to="/member/my_point" class="item-content">
                                    <img src="@/assets/images/point.png" alt />
                                    <div class="name">积分</div>
                                    <div class="num" v-if="member.point">{{ member.point }}</div>
                                    <div class="num" v-else>0</div>
                                </router-link>
                            </div>
                            <div class="item">
                                <router-link to="/member/account" class="item-content">
                                    <img src="@/assets/images/balance.png" alt />
                                    <div class="name">余额</div>
                                    <div class="num" v-if="member.balance || member.balance_money">
                                        {{ (parseFloat(member.balance) + parseFloat(member.balance_money)).toFixed(2) }}
                                    </div>
                                    <div class="num" v-else>0</div>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="collection">
                    <div class="title">我的关注</div>
                    <div class="xian"></div>
                    <div class="item-wrap">
                        <div class="item">
                            <div class="num">{{ shopTotal }}</div>
                            <div class="collect">店铺关注</div>
                        </div>
                        <div class="item">
                            <div class="num">{{ goodsTotal }}</div>
                            <div class="collect">商品关注</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="member-body" v-if="is_pintuan == -1">
                <div v-if="pintuantraderDetail == null &&  pintuantraderDetails == null">
                    <img src="@/assets/images/pintuan.png" alt @click="btnImg" style="width: 744px" />
                </div>
                <span v-else>
                <div class="member-body-shenhe" v-if="check_status == 2">
                    <img src="@/assets/images/loading.png" alt="" />
                    <span>您的团长申请正在审核中，请耐心等待！</span>
                </div>

                <div class="member-body-shibai" v-if="check_status == 3">
                    <img src="@/assets/images/unsuccessful.png" alt="" />
                    <em>很抱歉，您的团长申请没有通过！</em><br />
                    <span>拒绝理由：{{ message }}</span>
                    <el-button type="primary" @click="chongxin">重新申请</el-button>
                </div>
                </span>
            </div>
            <div class="member-body"  v-if="isAllowApplyAgent() || agent_check_status == 4">
                <div v-if="pintuantraderAgentDetail == null && pintuantraderAgentDetails == null">
                    <img src="@/assets/images/agent.png" alt @click="btnImg1" style="width: 744px" />
                </div>
                <span v-else>
                <div class="member-body-shenhe" v-if="agent_check_status == 0">
                    <img src="@/assets/images/loading.png" alt="" />
                    <span>等待上级审核！</span>
                </div>
                <div class="member-body-shibai"  v-if="agent_check_status == 1">
                    <img src="@/assets/images/unsuccessful.png" alt="" />
                    <em>很抱歉，上级审核拒绝！</em><br />
                    <span>拒绝理由：{{ reason }}</span>
                    <el-button type="primary" @click="chongxin1">重新申请</el-button>
                </div>
                 <div class="member-body-shenhe" v-if="agent_check_status == 2">
                    <img src="@/assets/images/loading.png" alt="" />
                    <span>等待平台审核！</span>
                </div>
                 <div class="member-body-shibai"  v-if="agent_check_status == 3">
                    <img src="@/assets/images/unsuccessful.png" alt="" />
                    <em>很抱歉，平台审核拒绝！</em><br />
                    <span>拒绝理由：{{ reason }}</span>
                    <el-button type="primary" @click="chongxin1">重新申请</el-button>
                </div>
                 <div class="member-body-shenhe" v-if="agent_check_status == 4">
                    <img src="@/assets/images/chhengg.png" alt="" />
                    <span>审核通过</span>
                </div>
                 <div class="member-body-shibai"  v-if="agent_check_status == 5">
                    <img src="@/assets/images/unsuccessful.png" alt="" />
                    <em>很抱歉，平台要求整改！</em><br />
                    <span>拒绝理由：{{ reason }}</span>
                    <el-button type="primary" @click="chongxin1">重新申请</el-button>
                </div>
                </span>
            </div>

            <!-- <div class="member-body" v-if="pintuan_show == 1 && pintuan_show !== 4">
                <div v-if="pintuantraderDetail == null &&  pintuantraderDetails == null">
                    <img src="@/assets/images/pintuan.png" alt @click="btnImg" style="width: 744px" />
                </div>
                <span v-else>
                <div class="member-body-shenhe" v-if="check_status == 2">
                    <img src="@/assets/images/loading.png" alt="" />
                    <span>您的拼团商申请正在审核中，请耐心等待！</span>
                </div>

                <div class="member-body-shibai" v-if="check_status == 3">
                    <img src="@/assets/images/unsuccessful.png" alt="" />
                    <em>很抱歉，您的拼团商申请没有通过！</em><br />
                    <span>拒绝理由：{{ message }}</span>
                    <el-button type="primary" @click="chongxin">重新申请</el-button>
                </div>
                </span>
            </div> -->
<!-- 
            <div class="member-body" v-if="isAllowApplyAgent()">
                <div v-if="pintuantraderAgentDetail == null && pintuantraderAgentDetails == null">
                    <img src="@/assets/images/agent.png" alt @click="btnImg1" style="width: 744px" />
                </div>
                <span v-else>
                <div class="member-body-shenhe" v-if="agent_check_status == 0">
                    <img src="@/assets/images/loading.png" alt="" />
                    <span>等待上级审核！</span>
                </div>
                <div class="member-body-shibai"  v-if="agent_check_status == 1">
                    <img src="@/assets/images/unsuccessful.png" alt="" />
                    <em>很抱歉，上级审核拒绝！</em><br />
                    <span>拒绝理由：{{ reason }}</span>
                    <el-button type="primary" @click="chongxin1">重新申请</el-button>
                </div>
                 <div class="member-body-shenhe" v-if="agent_check_status == 2">
                    <img src="@/assets/images/loading.png" alt="" />
                    <span>等待平台审核！</span>
                </div>
                 <div class="member-body-shibai"  v-if="agent_check_status == 3">
                    <img src="@/assets/images/unsuccessful.png" alt="" />
                    <em>很抱歉，平台审核拒绝！</em><br />
                    <span>拒绝理由：{{ reason }}</span>
                    <el-button type="primary" @click="chongxin1">重新申请</el-button>
                </div>
                 <div class="member-body-shenhe" v-if="agent_check_status == 4">
                    <img src="@/assets/images/chhengg.png" alt="" />
                    <span>审核通过</span>
                </div>
                 <div class="member-body-shibai"  v-if="agent_check_status == 5">
                    <img src="@/assets/images/unsuccessful.png" alt="" />
                    <em>很抱歉，平台要求整改！</em><br />
                    <span>拒绝理由：{{ reason }}</span>
                    <el-button type="primary" @click="chongxin1">重新申请</el-button>
                </div>
                </span>
            </div> -->

            <div class="member-bottom">
                <div class="my-order" v-if="btnnum != 2">
                    <div class="order-title">我的订单</div>
                    <div class="xian"></div>
                    <div class="order-item">
                        <router-link to="/member/order_list?status=waitpay" class="item">
                            <i class="iconfont icondaifukuan"></i>
                            <div v-if="orderNum.waitPay" class="order-num">{{ orderNum.waitPay }}</div>
                            <div class="name">待付款</div>
                        </router-link>
                        <router-link to="/member/order_list?status=waitsend" class="item">
                            <i class="iconfont icondaifahuo"></i>
                            <div v-if="orderNum.readyDelivery" class="order-num">{{ orderNum.readyDelivery }}</div>
                            <div class="name">待发货</div>
                        </router-link>
                        <router-link to="/member/order_list?status=waitconfirm" class="item">
                            <i class="iconfont icontubiaolunkuo-"></i>
                            <div v-if="orderNum.waitDelivery" class="order-num">{{ orderNum.waitDelivery }}</div>
                            <div class="name">待收货</div>
                        </router-link>
                        <router-link to="/member/order_list?status=waitrate" class="item">
                            <i class="iconfont icondaipingjia"></i>
                            <div v-if="orderNum.waitEvaluate" class="order-num">{{ orderNum.waitEvaluate }}</div>
                            <div class="name">待评价</div>
                        </router-link>
                        <router-link to="/member/activist" class="item">
                            <i class="iconfont iconshouhou"></i>
                            <div v-if="orderNum.refunding" class="order-num">{{ orderNum.refunding }}</div>
                            <div class="name">退款/售后</div>
                        </router-link>
                    </div>
                    <div v-if="orderList.length">
                        <div class="order-goods-wrap" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex">
                            <div class="order-goods" v-for="(goodsItem, goodsIndex) in orderItem.order_goods" :key="goodsIndex">
                                <div class="goods-item">
                                    <div class="goods-img" @click="$router.pushToTab({ path: '/sku-' + goodsItem.sku_id })">
                                        <img :src="$img(goodsItem.sku_image, { size: $goodsImgType('mid',goodsItem.source) })" @error="imageErrorOrder(orderIndex, goodsIndex)" />
                                    </div>
                                    <div class="info-wrap">
                                        <div class="goods-name" @click="$router.pushToTab({ path: '/sku-' + goodsItem.sku_id })">{{ goodsItem.sku_name }}</div>
                                        <div class="price">￥{{ goodsItem.price }}</div>
                                    </div>
                                    <div class="payment">{{ orderItem.order_status_name }}</div>
                                    <div class="goods-detail" @click="orderDetail(orderItem)"><p>查看详情</p></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="empty" v-else>
                        <img src="@/assets/images/member-empty.png" alt />
                        <div>您买的东西太少了，这里都空空的，快去挑选合适的商品吧！</div>
                    </div>
                </div>

                <div class="my-order" v-else>
                    <div class="order-title">我的订单</div>
                    <div class="xian"></div>
                    <div class="order-item">
                        <router-link to="/member/order_list?status=waitpay" class="item">
                            <i class="iconfont icondaifukuan"></i>
                            <div v-if="orderNum.waitPay" class="order-num">{{ orderNum.waitPay }}</div>
                            <div class="name">待付款</div>
                        </router-link>
                        <router-link to="/member/order_list?status=waitsend" class="item">
                            <i class="iconfont icondaifahuo"></i>
                            <div v-if="orderNum.readyDelivery" class="order-num">{{ orderNum.readyDelivery }}</div>
                            <div class="name">待发货</div>
                        </router-link>
                        <router-link to="/member/order_list?status=waitconfirm" class="item">
                            <i class="iconfont icontubiaolunkuo-"></i>
                            <div v-if="orderNum.waitDelivery" class="order-num">{{ orderNum.waitDelivery }}</div>
                            <div class="name">待收货</div>
                        </router-link>
                        <router-link to="/member/order_list?status=waitrate" class="item">
                            <i class="iconfont icondaipingjia"></i>
                            <div v-if="orderNum.waitEvaluate" class="order-num">{{ orderNum.waitEvaluate }}</div>
                            <div class="name">待评价</div>
                        </router-link>
                        <router-link to="/member/activist" class="item">
                            <i class="iconfont iconshouhou"></i>
                            <div v-if="orderNum.refunding" class="order-num">{{ orderNum.refunding }}</div>
                            <div class="name">退款/售后</div>
                        </router-link>
                    </div>
                    <div v-if="orderList.length">
                        <div class="order-goods-wrap" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex">
                            <div class="order-goods" v-for="(goodsItem, goodsIndex) in orderItem.order_goods" :key="goodsIndex">
                                <div class="goods-item">
                                    <div class="goods-img" @click="$router.pushToTab({ path: '/sku-' + goodsItem.sku_id })">
                                        <img :src="$img(goodsItem.sku_image, { size: $goodsImgType('mid',goodsItem.source) })" @error="imageErrorOrder(orderIndex, goodsIndex)" />
                                    </div>
                                    <div class="info-wrap">
                                        <div class="goods-name" @click="$router.pushToTab({ path: '/sku-' + goodsItem.sku_id })">{{ goodsItem.sku_name }}</div>
                                        <div class="price">￥{{ goodsItem.price }}</div>
                                    </div>
                                    <div class="payment">{{ orderItem.order_status_name }}</div>
                                    <div class="goods-detail" @click="orderDetail(orderItem)"><p>查看详情</p></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="empty" v-else>
                        <img src="@/assets/images/member-empty.png" alt />
                        <div>您买的东西太少了，这里都空空的，快去挑选合适的商品吧！</div>
                    </div>
                </div>

                <div class="bottom-right">
                    <div class="my-foot">
                        <div class="title">我的足迹</div>
                        <div class="xian"></div>
                        <div class="foot-content" v-for="(item, index) in footList" :key="item.goods_id">
                            <div class="foot-item" @click="$router.pushToTab({ path: '/sku-' + item.sku_id })">
                                <div class="foot-img"><img :src="$img(item.sku_image.split(',')[0], { size: $goodsImgType('mid',item.source) })" @error="imageErrorFoot(index)" /></div>
                                <div class="foot-info">
                                    <div class="foot-name">{{ item.goods_name }}</div>
                                    <div class="foot-price">￥{{ item.discount_price }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新人专享红包 -->
			<div class="floatLayer-wrap" v-if="floatLayer.is_show">
				<div class="floatLayer">
                    <span>
                        <img src="../../../src\assets\images\red_packet.png" alt="">
                    </span>
                    <div class="tips">*优惠券已发放到账户,请到我的优惠券查看</div>
                    <div class="new-exclusive">
                        <div class="new-exclusive-item" v-for="(item,index) in coupon_list" :key="index">
                            <div class="item-price" v-if="item.coupon_type != 2">￥{{item.money}}</div>
                            <div class="item-price" v-if="item.coupon_type == 2">{{item.discount}}折</div>
                            <div class="item-content" v-if="item.coupon_type == 1">
                                <p>满{{item.limit_money}}元减{{item.money}}</p>
                                <span>满减卷</span>
                            </div>
                            <div class="item-content" v-else-if="item.coupon_type == 2">
                                <p>满{{item.limit_money}}元打{{item.discount}}折</p>
                                <span>满折劵</span>
                            </div>
                            <div class="item-content" v-else>
                                <p>无门槛使用</p>
                                <span>无门槛优惠券</span>
                            </div>
                            <div class="item-link">
                                <span>去使用</span>
                            </div>
                        </div>
                    </div>
					<i class="el-icon-circle-close" @click="closeFloat"></i>
				</div>
			</div>
    </div>
</template>

<script>
import { orderNum, couponNum, footprint, levelList } from "@/api/member/index"
import { shopCollect, goodsCollect } from "@/api/member/collection"
import { apiOrderList } from "@/api/order/order"
import { newuserCouponPage } from "@/api/coupon"
import { mapGetters } from "vuex"
import { newapply, pintuantraderApplydetail, newAgentApply, pintuantraderAgentApplydetail, memberDetail } from "@/api/pintuan/pintuan"
export default {
    name: "member",
    components: {},
    data: () => {
        return {
            couponNum: 0,
            orderNum: {
                waitPay: 0, //待付款
                readyDelivery: 0, //待发货
                waitDelivery: 0, //待收货
                refunding: 0 // 退款中
            },
            orderList: [],
            orderStatus: "all",
            footInfo: {
                page: 1,
                page_size: 6
            },
            apply_type: 0,
            total: 0,
            footList: [],
            currentPage: 1,
            loading: true,
            goodsTotal: 0,
            shopTotal: 0,
            state: "",
            growth: "",
            levelList: [],
            member_level: {},
            progress: 0,
            yes: true,
			btnnum: 1,
			btnnums: 1,
			message: "",
            dataCode: 0,
            floatLayer: {
                is_show: 0,
                link: {
                    url: ""
                }
            },
            coupon_list: [],
            pintuantraderDetail: null,//用户信息详情,
            pintuantraderDetails : null,// 拼团商
            pintuantraderAgentDetail: null,
            pintuantraderAgentDetails: null,
            pintuan_show: 1,
            reason: "",
            agent_check_status: -1,
            check_status: -1,
            is_pintuan: -1,
            is_agent: -1,
        }
    },
    created() {
        //优惠插件存在，并且是新用户而且有红包活动时弹出
        if(this.$route.query.is_new && this.addonIsExit.newusercoupon) {
             this.getNewuserCouponPage();  
        }
        this.getMemberDetail()
        this.getCouponNum()
        this.getOrderNum()
        this.getOrderList()
        this.getFootprint()
        this.getGoodsCollect()
        this.getShopCollect()
        this.getPintuantraderApplydetail();
        this.getPintuantraderAgentApplydetail();
    },
    computed: {
        ...mapGetters(["defaultHeadImage", "defaultGoodsImage", "member","addonIsExit"]),
		reapply_submit_check() {
			return this.$util.timeStampTurnTime(this.admin_check_time + 24 * 60 * 60 * this.day);
		}
    },
    watch: {
        member: {
            handler() {
                if (this.member) this.getLevelList()
            },
            immediate: true,
            deep: true
        }
    },
    mounted() {
        let self = this
        setTimeout(function () {
            self.yes = false
        }, 300)
    },
    methods: {
        copyLink() {
            let code = this.member.invite_code;
            this.$util.copy(code);
        },
        //能否申请代理
		isAllowApplyAgent(){
			return this.pintuantraderDetail && this.pintuantraderDetail.pintuan_trader_level == 'common' && this.pintuantraderDetail.superior != 0 && (this.pintuantraderDetail.superior_pintuan_trader_level == 'district' || this.pintuantraderDetail.superior_pintuan_trader_level == 'city');
        },
        //获取用户信息，根据此接口判断显示申请拼团还是申请代理
        getMemberDetail() {
            memberDetail()
                .then(res=>{
                    console.log(res,'用户信息')
                    this.pintuantraderDetail = res.data;
                    if(res.data != null) {
                        this.is_pintuan = res.data.pintuan_trader_level;
                    }
                })
                .catch(err=>{
                    console.log(err,'用户信息错误')
                })
        },
        getPintuantraderApplydetail() {
            pintuantraderApplydetail() 
                .then(res=>{
                    console.log(res,'拼团商信息');
                    this.pintuantraderDetails = res.data.apply_info;
                    if(res.data.apply_info != null) {
                        this.check_status = res.data.apply_info.check_status;
                    }
                    this.message = res.data.apply_info.admin_reject_reason;
                })
                .catch(err=>{
                    console.log(err,'拼团商信息error');
                })
        },
        getPintuantraderAgentApplydetail() {
            pintuantraderAgentApplydetail()
                .then(res=>{
                    console.log(res,'代理商信息');
                    if(res.code >= 0) {
                       
                      this.pintuantraderAgentDetails = res.data.apply_info;
                      if(apply_info != null) {
                          this.agent_check_status = res.data.apply_info.check_status;
                      }
                      //上级拒绝
						if (this.agent_check_status == 1) {
							this.reason =res.data.apply_info.superior_reject_reason;
							this.admin_check_time =res.data.apply_info.superior_check_time;
							this.day =res.data.config_info.superior_reject_agent_day;
						} else { //平台拒绝或整改
                            this.reason = res.data.apply_info.admin_reject_reason;
							if (this.agent_check_status == 3) { //平台拒绝不显示时间
								this.admin_check_time = res.data.apply_info.admin_check_time;
								this.day = res.data.config_info.admin_reject_agent_day;
							}
                        }
                    }

                })
                .catch(err=>{
                    console.log(err,'代理商信息 error')
                })
        },
        //获取新人红包优惠
        getNewuserCouponPage() {
            newuserCouponPage({
                page: 1,
                page_size: 10,
                status: 0,
            })
                .then((res) => {
                    //console.log(res)
                    if(res.code == 0) {
                        this.coupon_list = res.data.list;
                        if(this.coupon_list.length > 0) {
                            this.floatLayer.is_show = 1;  
                        }
                    }
                })
                .catch(err=>{
                    console.log(err.message)
                })
        },
        closeFloat() {
            this.floatLayer.is_show = !this.floatLayer.is_show;
            this.$router.push({name:'member'});
        },
        getLevelList() {
            levelList()
                .then((res) => {
                    if (res.data && res.code == 0) {
                        this.levelList = res.data
                        let listIndex = this.levelList.findIndex((item) => item.level_id == this.member.member_level)

                        const max = this.levelList.length
                        if (max > listIndex + 1) {
                            if (this.member.growth > this.levelList[listIndex + 1].growth) {
                                this.progress = 100
                            } else {
                                //this.progress = (this.member.growth / this.levelList[listIndex + 1].growth) * 100
                            }
                        } else {
                            this.progress = 100
                        }
                    } else {
                        this.$message.error(err.message)
                    }
                })
                .catch((err) => {
                    console.log(err.message)
                })
        },
        //获取优惠券数量
        getCouponNum() {
            couponNum()
                .then((res) => {
                    this.couponNum = res.data
                })
                .catch((err) => {
                    console.log(err.message)
                })
        },
        //获取订单数量
        getOrderNum() {
            orderNum({
                order_status: "waitpay,waitsend,waitconfirm,waitrate,refunding"
            })
                .then((res) => {
                    if (res.code == 0) {
                        this.orderNum.waitPay = res.data.waitpay
                        this.orderNum.readyDelivery = res.data.waitsend
                        this.orderNum.waitDelivery = res.data.waitconfirm
                        this.orderNum.waitEvaluate = res.data.waitrate
                        this.orderNum.refunding = res.data.refunding
                    }
                })
                .catch((err) => {
                    console.log(err.message)
                })
        },
        //获取订单列表
        getOrderList() {
            apiOrderList({
                order_status: this.orderStatus,
                page: 1,
                page_size: 3
            })
                .then((res) => {
                    if (res.code == 0 && res.data) {
                        this.orderList = res.data.list
                    }
                    this.loading = false
                })
                .catch((err) => {
                    this.loading = false
                    this.$message.error(err.message)
                })
        },
        //获取我的足迹
        getFootprint() {
            footprint(this.footInfo)
                .then((res) => {
                    if (res.code == 0 && res.data) {
                        this.footList = res.data.list
                        this.total = res.data.count
                    }
                })
                .catch((err) => {
                    console.log(err.message)
                })
        },
        orderDetail(data) {
            switch (parseInt(data.order_type)) {
                case 2:
                    // 自提订单
                    this.$router.push({
                        path: "/member/order_detail_pickup",
                        query: { order_id: data.order_id }
                    })
                    break
                case 3:
                    // 本地配送订单
                    this.$router.push({
                        path: "/member/order_detail_local_delivery",
                        query: { order_id: data.order_id }
                    })
                    break
                case 4:
                    // 虚拟订单
                    this.$router.push({
                        path: "/member/order_detail_virtual",
                        query: { order_id: data.order_id }
                    })
                    break
                default:
                    this.$router.push({
                        path: "/member/order_detail",
                        query: { order_id: data.order_id }
                    })
                    break
            }
        },
        imageErrorOrder(orderIndex, goodsIndex) {
            this.orderList[orderIndex].order_goods[goodsIndex].sku_image = this.defaultGoodsImage
        },
        imageErrorFoot(index) {
            this.footList[index].sku_image = this.defaultGoodsImage
        },
        getGoodsCollect() {
            goodsCollect()
                .then((res) => {
                    this.goodsTotal = res.data.count
                })
                .catch((err) => {
                    this.loading = false
             
                })
        },
        getShopCollect() {
            shopCollect()
                .then((res) => {
                    this.shopTotal = res.data.count
                })
                .catch((err) => {
                    this.loading = false
                 
                })
        },
        btnImg() {
             this.$alert("确定要成为团长", {
                confirmButtonText: "确定",
                callback: (action) => {
                    newapply().then((res) => {
                        window.location.reload();
                    })
                }
            })
        },
        btnImg1() {
            this.$alert("确定要成为代理商", {
                confirmButtonText: "确定",
                callback: (action) => {
                    newAgentApply().then((res) => {
                        window.location.reload();
                    })
                }
            })
        },
        chongxin() {
            newapply()
                .then(res=>{
                    window.location.reload();
                })
                .catch(err=>{
                    this.$alert('请于'+err.message, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            // this.$message({
                            // type: 'info',
                            // message: '请于'+err.message
                            // });
                        }
                        });
                })
        },
        chongxin1() {
            newAgentApply()
                .then(res=>{
                    console.log(res.message)
                })
                .catch(err=>{
                    this.$alert('请于'+this.reapply_submit_check+'重新申请', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            // this.$message({
                            // type: 'info',
                            // message: '请于'+ this.reapply_submit_check + '重新申请'
                            // });
                        }
                        });
                })
        }
    }
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    position: relative;
}

.floatLayer-wrap {
    position: fixed;
    height: 100vh;
    width: 100vw;
    left: 0;
    top: 0;
    background: rgba($color: #000000, $alpha: 0.5);
    z-index: 999;
    .floatLayer {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        cursor: pointer;
        i {
            color: #ffffff;
            font-size: 30px;
            position: absolute;
            bottom: -30px;
            right: -30px;
        }
    }
}


.floatLayer-wrap {
    position: fixed;
    height: 100vh;
    width: 100vw;
    left: 0;
    top: 0;
    background: rgba($color: #000000, $alpha: 0.5);
    z-index: 999;
    .floatLayer {
        position: fixed;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        z-index: 999;
        cursor: pointer;

        .tips {
           width: 78.5%;
           margin-left: 10.5%;
           height: 3vh;
           color:#fff;
           box-sizing: border-box;
           padding-left: 2vw;
           background-color: #EF3030;
        }

        .new-exclusive {
            width: 78.5%;
            height: 32vh;
            box-sizing: border-box;
            margin-left: 10.5%;
            overflow-y: scroll;
            background-color: #EF3030;
            border-radius: 0 0 30px 30px;
            padding: 0 0 20px 0;

            .new-exclusive-item {
                width: 85%;
                margin: 0 auto;
                height: 12vh;
                background-color: #fff;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-radius: 20px;
                margin-top: 11px;

                .item-price {
                    font-size: 45px;
                    color: #EF3030;
                }

                .item-content {
                    width: 50%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    
                    p {
                        font-size: 20px;
                        font-weight: 800;
                    }
                    span {
                        color:#848585;
                    }
                }

                .item-link {
                    span {
                        display: inline-block;
                        background: #EF3030;
                        color: #fff;
                        padding: 10px 20px;
                        border-radius: 20px;
                    }
                }
            }
        }
        .new-exclusive::-webkit-scrollbar {
            display: none;
        }

        i {
            color: #ffffff;
            font-size: 30px;
            position: absolute;
            bottom: -10%;  //350
            right: 50%; //250
        }
    }
}


.null-page {
    width: 100%;
    height: 730px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

.member-index {
    .member-top {
        width: 100%;
        display: flex;
        .info-wrap {
            width: 75%;
            height: 160px;
            border: 1px solid #e9e9e9;
            background: #ffffff;
            display: flex;
            .info-top {
                display: flex;
                align-items: center;
                margin: 22px;
                margin-right: 0;
                width: 300px;
                border-right: 1px solid #e9e9e9;
                .avtar {
                    width: 84px;
                    height: 84px;
                    margin: 20px 0 10px 0;
                    border: 1px solid #e9e9e9;
                    border-radius: 50%;
                    overflow: hidden;
                    display: block;
                    cursor: pointer;
                    margin-left: 21px;
                    text-align: center;
                    line-height: 84px;

                    img {
                        display: inline-block;
                    }
                }
                .member-wrap {
                    margin-left: 20px;
                    .name {
                        font-size: 18px;
                        font-weight: 600;
                        cursor: pointer;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .growth {
                        display: flex;
                        align-items: center;
                    }
                    .el-progress {
                        width: 100px;
                    }
                    .level {
                        padding: 3px 4px;
                        line-height: 1;
                        color: #ffffc1;
                        margin: 6px 0;
                        cursor: default;
                        background: linear-gradient(#636362, #4e4e4d);
                        border-radius: 3px;
                        display: inline-block;
                    }
                }
            }
            .account {
                width: 400px;
                display: flex;
                align-items: center;
                .content {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    .item {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        .item-content {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }
                        img {
                            width: 50px;
                            height: 50px;
                        }
                        .name {
                            margin-top: 5px;
                            color: #666666;
                            &:hover {
                                color: $base-color;
                            }
                        }
                        .num {
                            color: $ns-text-color-black;
                        }
                    }
                }
            }
        }
        .collection {
            background: #ffffff;
            margin-left: 20px;
            width: 210px;
            border: 1px solid #e9e9e9;
            padding-left: 20px;
            .title {
                padding: 10px 0;
                display: inline-block;
                border-bottom: 1px solid $base-color;
            }
            .xian {
                height: 1px;
                background: #f1f1f1;
            }
            .item-wrap {
                display: flex;
                justify-content: center;
                align-items: center;
                .item {
                    flex: 1;
                    margin-top: 37px;
                    .collect {
                        color: #666666;
                    }
                }
            }
        }
    }

    .member-body {
        width: 74.6%;
        height: 106px;
        margin: 20px 0 20px 0;
        background-color: #ffffff;
        position: relative;
        .member-body-shenhe {
            height: 100%;
            background-color: #fffef0;
            img {
                width: 41px;
                height: 41px;
                margin: 33px 0 0 247px;
            }
            span {
                height: 15px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #303133;
                line-height: 36px;
                position: absolute;
                top: 37px;
                left: 300px;
            }
        }
        .member-body-shibai {
            height: 100%;
            background-color: #fffef0;
            img {
                width: 41px;
                height: 41px;
                margin: 38px 0 0 200px;
            }
            em {
                color: #303133;
                position: absolute;
                top: 40px;
                left: 257px;
                font-weight: 500;
            }
            span {
                color: #909399;
                position: absolute;
                top: 66px;
                left: 257px;
                font-weight: 500;
                font-size: 12px;
            }
            button {
                width: 100px;
                height: 27px;
                line-height: 0;
                text-align: center;
                color: #f1f1f1;
                background: #ff5f8a;
                position: absolute;
                right: 52px;
                top: 52px;
            }
        }
    }
    .member-bottom {
        width: 100%;
        margin-top: 15px;
        height: 553px;
        display: flex;
        overflow: hidden;

        .my-order {
            width: 75%;
            background-color: #ffffff;
            .order-title {
                font-size: $ns-font-size-base;
                padding: 10px 0;
                margin-left: 15px;
                border-bottom: 1px solid $base-color;
                display: inline-block;
            }
            .xian {
                height: 1px;
                background: #f1f1f1;
                margin-left: 15px;
            }
            .order-item {
                display: flex;
                justify-content: center;
                align-content: center;

                .item {
                    flex: 1;
                    text-align: center;
                    height: 85px;
                    padding-top: 20px;
                    cursor: pointer;
                    position: relative;
                    &:hover {
                        background: #ffffff;
                        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                    }
                    .order-num {
                        position: absolute;
                        top: 23px;
                        right: 50px;
                        background: $base-color;
                        border-radius: 50%;
                        width: 18px;
                        height: 18px;
                        line-height: 18px;
                        color: #ffff;
                    }

                    i {
                        font-size: 30px;
                    }
                    .name {
                        font-size: $ns-font-size-base;
                    }
                }
            }
            .order-goods {
                .goods-item {
                    display: flex;
                    padding: 14px;
                    border-top: 1px solid #f1f1f1;
                    .goods-img {
                        flex: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        img {
                            width: 60px;
                            height: 60px;
                        }
                    }
                    .info-wrap {
                        flex: 3;
                        width: 80%;
                        .goods-name {
                            height: 46px;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        .price {
                            color: $base-color;
                        }
                    }
                    .payment {
                        flex: 2;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-overflow: ellipsis;
                    }
                    .goods-detail {
                        flex: 2;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        &:hover {
                            color: $base-color;
                        }
                    }
                }
            }
        }
        .bottom-right {
            position: absolute;
            right: 0;
            top: 183px;
            .my-foot {
                background: #ffffff;
                margin-left: 20px;
                width: 230px;
                .title {
                    font-size: $ns-font-size-base;
                    padding: 10px 0;
                    display: inline-block;
                    border-bottom: 1px solid $base-color;
                    margin: 0 15px;
                }
                .xian {
                    margin-left: 15px;
                    background: #f1f1f1;
                    height: 1px;
                }
                .foot-content {
                    .foot-item {
                        display: flex;
                        padding: 10px 0;
                        margin: 0 15px;
                        .foot-img {
                            width: 57px;
                            height: 57px;
                            cursor: pointer;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .foot-info {
                            margin-left: 5px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            .foot-name {
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                line-height: 1;
                                width: 140px;
                            }
                            .foot-price {
                                color: $base-color;
                            }
                        }
                    }
                }
            }
        }
    }
}
.empty {
    text-align: center;
    margin-top: 65px;
}
</style>
